<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>社群简介</h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="intro">
      <div class="title">
        <span class="left">社群宗旨</span>
        <span class="right" @click="toEdit">编辑</span>
      </div>
      <div class="txt">哈哈哈社群宗旨社群宗旨社群</div>

      <div class="title">
        <span class="left">社群简介</span>
        <span class="right" @click="show = true">新增</span>
      </div>

      <!-- 图文/视频/pdf -->
      <div class="contentItem" @click="toDetail('video')">
        <!-- 封面 -->
        <div class="cover">
          <img class="img1" src="../../assets/images/adver.jpg" />
          <!-- 是视频：有播放icon在上面 -->
          <img class="play" src="../../assets/images/mkf/icon_play.png" />
        </div>
        <div class="tit">标题标题标题标题标题标题标题标题标题标题标题标题</div>
      </div>

      <div class="contentItem" @click="toDetail('pdf')">
        <!-- 封面 -->
        <div class="cover">
          <img class="img1" src="../../assets/images/adver.jpg" />
        </div>
        <div class="tit">标题标题标题标题标题标题标题标</div>
      </div>

      <div class="contentItem" @click="toDetail('img')">
        <!-- 封面 -->
        <div class="cover">
          <img class="img1" src="../../assets/images/adver.jpg" />
        </div>
        <div class="tit">标题标题标题标题标题标题标题标题标题标题标题标题</div>
      </div>
    </div>

    <!-- 操作 -->
    <yd-actionsheet :items="myItems" v-model="show"></yd-actionsheet>
  </div>
</template>

<script>
import { ActionSheet } from "vue-ydui/dist/lib.rem/actionsheet";
export default {
  name: "",
  components: {
    ydActionsheet: ActionSheet
  },
  props: {},
  data: function() {
    return {
      show: false,
      myItems: []
    };
  },
  mounted: function() {
    this.myItems = [
      {
        label: "上传视频",
        callback: () => {
          this.$router.push({
            path: "/com/introEdit",
            query: {
              type: "video"
            }
          });
        }
      },
      {
        label: "上传PDF",
        callback: () => {
          this.$router.push({
            path: "/com/introEdit",
            query: {
              type: "pdf"
            }
          });
        }
      },
      {
        label: "编辑图文",
        callback: () => {
          this.$router.push({
            path: "/com/introEdit",
            query: {
              type: "img"
            }
          });
        }
      }
    ];
  },
  methods: {
    toEdit() {
      this.$router.push({
        path: "/com/editAim",
        query: {
          txt: "哈哈哈社群宗旨社群宗旨社群"
        }
      });
    },
    toDetail(type) {
      this.$router.push({
        path: "/com/introDetail",
        query: {
          type: type
        }
      });
    }
  }
};
</script>

<style scoped>
.contentItem {
  width: 7.1rem;
  margin: 0 auto 0.3rem;
}
.contentItem .cover {
  width: 7.1rem;
  height: 4rem;
  border-radius: 0.1rem;
  overflow: hidden;
  position: relative;
}
.contentItem .cover .img1 {
  display: block;
  width: 7.1rem;
  height: 4rem;
  border-radius: 0.1rem;
  margin: 0 auto;
}
.contentItem .cover .play {
  display: block;
  width: 1.04rem;
  height: 1.04rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.52rem;
  margin-left: -0.52rem;
  z-index: 1;
}
.contentItem .tit {
  padding-top: 0.11rem;
  font-size: 0.32rem;
  line-height: 0.42rem;
  color: #999999;
  padding-bottom: 0.15rem;
}
.intro .title {
  padding: 0.25rem 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intro .title .left {
  position: relative;
  padding-left: 0.3rem;
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.28rem;
  font-weight: bold;
  color: #deaa8a;
}

.intro .title .left::after {
  content: "";
  width: 0.08rem;
  height: 0.26rem;
  background-color: #deaa8a;
  border-radius: 0.02rem;
  position: absolute;
  top: 0.05rem;
  left: 0;
}

.intro .title .right {
  font-size: 0.24rem;
  line-height: 0.36rem;
  color: #666666;
  padding-left: 0.3rem;
}

.intro .txt {
  width: 7.1rem;
  margin: 0 auto 0.3rem;
  font-size: 0.32rem;
  line-height: 0.64rem;
  color: #999999;
  padding: 0.15rem 0.3rem;
  background-color: #32303a;
  border-radius: 0.1rem;
}
</style>
<style>
.yd-actionsheet {
  background-color: #32303a;
}

.yd-actionsheet-item {
  background-color: #32303a;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.32rem;
  color: #999999;
}

.yd-actionsheet-item:after {
  background: rgba(255, 255, 255, 0.1);
}
</style>
